<template>
 <div class="_wz_wzSubmenu">
   <template v-for="item in menuList">
     <template v-if="!!item.children && !!wzOpenNames && !!wzOpenNames[0] && item.id == wzOpenNames[0]">
       <template v-for="items in item.children">
         <!--     children-->

         <template v-if="!!items.children && items.children.length > 0">
           <Dropdown placement="left-start" :transfer="true" transfer-class-name="_wz_wzSubmenu_Dropdown">
             <div class="_wz_wzSubmenu_list" :class="{'_wz_wzSubmenu_list_select':(!!wzOpenNames && !!wzOpenNames[1] && items.id == wzOpenNames[1])}">
               <div class="_wz_wzSubmenu_list_img">
                 <img :src="items.menuIcon ? apiUrl.imgUrl + items.menuIcon : '/src/assets/logo.png'" style="height: 100%;">
               </div>

               <div class="_wz_wzSubmenu_list_name">{{items.name}}</div>
             </div>
             <template #list>
               <DropdownMenu>
                 <template v-if="!!items.children">
                   <template v-for="itemt in items.children">
                     <DropdownItem @click.stop="menuJump(itemt,items.id,itemt.id)"  :class="{'ivu-dropdown-itemSelect':(!!wzOpenNames && !!wzOpenNames[2] && itemt.id == wzOpenNames[2])}">{{itemt.name}}</DropdownItem>
                   </template>
                 </template>
               </DropdownMenu>
             </template>
           </Dropdown>
         </template>
         <template v-else>

           <div class="_wz_wzSubmenu_list" @click.stop="menuJump(items,items.id)" :class="{'_wz_wzSubmenu_list_select':(!!wzOpenNames && !!wzOpenNames[1] && items.id == wzOpenNames[1])}">
             <div class="_wz_wzSubmenu_list_img">
               <img :src="items.menuIcon ? apiUrl.imgUrl + items.menuIcon : '/src/assets/logo.png'" style="height: 100%;">
             </div>
             <div class="_wz_wzSubmenu_list_name">{{items.name}}</div>
           </div>
         </template>


       </template>
     </template>
   </template>
 </div>
</template>
<script>


import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import {getMenu} from "@/util/getMenu";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

import recursionNav from "../views/recursionNav.vue";//菜单




//reactive
export default defineComponent({
  name: 'wzSubmenu',//组件名称
  components: {
    recursionNav,
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $common = inject('$common');//自己封装的方法
    const router = useRouter();//路由跳转使用


    const state = reactive({
      menuList:[],//菜单数据
      wzNavName:'',
      wzOpenNames:[],

      wzNav:ref(),//菜单
    });





    //监听
    watch(() => router,(news, old) => {
      loadInit();
      state.wzNavName = router.currentRoute.value.name;
    },{deep: true});



    //通过子集 找父级
    const menuExpansion =  (name, list, obj)=> {//菜单展开
      // 匹配名称 循环数组  本身对象  父级对象
      let that = this;
      let menusList = [];
      for (let i = 0; i < list.length; i++) {
        if (!!list[i].children && list[i].children.length > 0) {
          if (!!list[i].name) {
            menusList.push(list[i].id);
          }
          let data = menuExpansion(name, list[i].children, list[i]);
          if (data.length > 0) {
            menusList = menusList.concat(data);
            return menusList;
          } else {
            menusList = [];
          }
        } else {
          if (list[i].menuUrl == name) {
            menusList.push(list[i].id);
            return menusList;
          }
        }
      }
      return menusList;
    }




    //菜单跳转
    const menuJump = (data,pid,id)=>{
      state.wzOpenNames[1] = pid;
      if(!!id){
        state.wzOpenNames[2] = id;
      }

      if(!!data.target){
        //target 打开方式
        //  _blank:外部链接   _innerblank:外部打开内部路由
        if(data.target == '_blank'){
          window.open(data.menuUrl, '_blank')
        }else{
          window.open('#/' + data.menuUrl, '_blank')
        }
      }else{
        router.push({ path:'/' + data.key, query: {}})
      }
    }


    // 获取全部点击数据
    const selectNav = (data,list)=>{
      for (let i = 0; i < list.length; i++) {
        if(!!list[i].children && list[i].children.length > 0){
          let a = selectNav(data,list[i].children)
          if(!!a){
            return  a;
          }
        }else{
          if(data == list[i].menuUrl){
            return list[i];
          }
        }
      }


      // list.map((k,i)=>{
      //   if(!!k.children && k.children.length > 0){
      //     let a = selectNav(data,k.children)
      //     if(!!a.id){
      //       return  a;
      //     }
      //   }else{
      //     if(data == k.menuList){
      //       return k;
      //     }
      //   }
      // })
      // return {};
    }


    //菜单数据 初始化
    const loadInit = ()=>{
      let menuList = (JSON.parse(sessionStorage.getItem('loginData')).userMenu.modules[0].menus).filter(item => !item.menuHide)

      // k.menuHide
      state.menuList = $common.convertTree(menuList,{
        value:'menuUrl',
        title:'name',
        children:'children',
      });

      state.wzNavName = router.currentRoute.value.name;
      state.wzOpenNames = menuExpansion(state.wzNavName,state.menuList)


      mainStore.parentMenu = state.wzOpenNames[0];//父级选中数据
    }

    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      loadInit();



    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      menuJump,//菜单跳转
      apiUrl,
    }
  }
})


</script>
<style lang="less">
._wz_wzSubmenu{
  height: 100%;
  overflow: auto;

  ._wz_wzSubmenu_list{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60px;
    cursor: pointer;
    transition: all 0.6s ease;
    margin: 5px 10px 5px 0;

    ._wz_wzSubmenu_list_img{
      height: 21px;
      img{
        height: 100%;
      }
    }
    ._wz_wzSubmenu_list_name{
      margin-top: 6px;
      font-size: 12px;
      text-align: center;
      color: #000;
    }
  }
  ._wz_wzSubmenu_list:hover{
    background-color: #4464b5;
    border-end-end-radius: 24px;
    border-top-right-radius: 24px;
    ._wz_wzSubmenu_list_name{
      color: #fff;
    }
  }
  ._wz_wzSubmenu_list_select{
    background-color: #4464b5;
    border-end-end-radius: 24px;
    border-top-right-radius: 24px;
    ._wz_wzSubmenu_list_name{
      color: #fff;
    }
  }
  .ivu-dropdown{
    display: block;
  }
}


._wz_wzSubmenu_Dropdown{
  min-width: 210px!important;
  max-height: 100%!important;
  padding: 10px;
  .ivu-dropdown-item{
    position: relative;
    height: 45px !important;
    line-height: 45px !important;
    padding: 0 20px;

  }
  .ivu-dropdown-item:before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #fff;
  }
  .ivu-dropdown-item:hover{
    color: #4464b5;
  }
  .ivu-dropdown-itemSelect{
    background-color: #eceff7;
  }
  .ivu-dropdown-itemSelect:before {
    background: #4464b5;
  }
}



._wz_wzSubmenu::-webkit-scrollbar {
  width: 0;
  height: 0;
}

</style>
